<template>
    <div class="bg-[#595959] py-[60px]">
        <footer class="w-[1200px] mx-auto text-white">
            <div class="grid grid-cols-3 gap-8 mb-12">
                <div>
                    <h3 class="text-[18px] font-bold mb-[20px]">
                        ACEHEAL艾斯康
                    </h3>
                    <a-row :gutter="[40, 16]">
                        <a-col :span="24">品牌介绍</a-col>
                        <a-col :span="12">科学严选</a-col>
                        <a-col :span="12">正直诚信</a-col>
                        <a-col :span="12">积极进取</a-col>
                        <a-col :span="12">成就用户</a-col>
                    </a-row>
                </div>
                <div>
                    <h3 class="text-[18px] font-bold mb-[20px]">公司地址</h3>
                    <p leading-relaxed>成都市金牛区金凤凰大道766号8栋1单元</p>
                </div>
                <!-- Social Media -->
                <div>
                    <h3 class="text-[18px] font-bold mb-[20px]">关注我们</h3>
                    <div class="flex space-x-6 mb-8">
                        <a-popover
                            v-for="_y in mediaList"
                            :key="_y"
                            placement="bottom"
                        >
                            <template #content>
                                <img :src="_y.code" alt="" />
                            </template>
                            <img
                                style="width: 60px; height: 60px"
                                :src="_y.icon"
                                alt=""
                            />
                        </a-popover>
                    </div>
                </div>
            </div>

            <div
                style="
                    padding: 20px 0;
                    margin: 40px 0;
                    border-top: 1px solid #ffffff;
                    border-bottom: 1px solid #ffffff;
                "
                class="text-sm"
            >
                <div class="flex space-x-4">
                    <span>蜀ICP备2024104006号</span>
                    <span>川公网安备51010602002645号</span>
                </div>
            </div>

            <a-row :gutter="[74, 20]">
                <a-col :span="24"> 法律声明 / Legal Notice: </a-col>
                <a-col :span="8">
                    <p leading-relaxed>
                        公司所提供的健康管理服务和产品不能替代专业医疗诊断和治疗，用户在使用前应咨询专业医生意见
                    </p>
                    <p>
                        The health management services and products provided by
                        the company cannot replace professional medical
                        diagnosis and treatment. Users should consult
                        professional doctors before use
                    </p>
                </a-col>
                <a-col :span="8">
                    <p font-100>
                        公司对所拥有的商标、专利、技术等知识产权均合法权益，禁止未经授权使用和复制
                    </p>
                    <p>
                        The company prohibits unauthorized use and reproduction
                        of its intellectual property rights such as trademarks,
                        patents, and technologies
                    </p>
                </a-col>
                <a-col :span="8">
                    <p class="leading-relaxed">
                        公司承诺遵守相关隐私保护法律法规，确保用户信息安全，防止信息泄露和滥用
                    </p>
                    <p>
                        The company promises to comply with relevant privacy
                        protection laws and regulations, ensure the security of
                        user information, and prevent information leakage and
                        abuse
                    </p>
                </a-col>
            </a-row>
        </footer>
    </div>
</template>
<script lang="ts" setup>
import weixin from '../assets/images/weixin.png'
import douyin from '../assets/images/douyin.png'
import redbook from '../assets/images/redbook.png'
import shipin from '../assets/images/shipin.png'

import weixin_code from '../assets/images/weixin_code.png'
import douyin_code from '../assets/images/douyin_code.png'
import redbook_code from '../assets/images/redbook_code.png'
import shipin_code from '../assets/images/shipin_code.png'

const mediaList = [
    {
        name: '微信',
        icon: weixin,
        code: weixin_code
    },
    {
        name: '抖音',
        icon: douyin,
        code: douyin_code
    },
    {
        name: '小红书',
        icon: redbook,
        code: redbook_code
    },
    {
        name: '视频号',
        icon: shipin,
        code: shipin_code
    }
]
</script>
<style scoped>
.fab,
.fas {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transition: all 0.3s ease;
}
.fab:hover,
.fas:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}
</style>
